<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<link rel="stylesheet" type="text/css" href="css/手机注册页.css"/>
	<style type="text/css">
		.loge{
			position: fixed;
			top: 0;
			left: 0;
			z-index: 999;
			background: url(../../img/logo.png) no-repeat;
			background-size: 36px 43px;
			height: 43px;
            line-height: 43px;
            padding-left: 46px;
            margin-left: 30px;
            margin-top: 18px;
            font-size: 36px;
            display: block;
            color: #000;
		}
	</style>
	<body>
		
		<div id="lef" class="left"></div>
		<div class="right">
			<ul class="ul1">
				<li id="li01" class="li1">
					<ul id="ul02" class="ul2">
						<div>
						    <input type="text" name="inp"/>
						</div>
					</ul>
				</li>
			</ul>
		</div>
		<div class="right_middle">
			<heder>
				<div class="h11">
					<div class="h111">
						<img src="img/icon_1.png"/>
					</div>
				</div>
			</heder>
			<div class="max">
				<h1>荣耀账号注册</h1>
				<div class="myt">
					<p>已有账号</p>
					<a href="#">去登录</a>
				</div>
				
				
				
				<!--1111-->
				<form id="form" method="get" autocomplete="off">
					<div style="position: relative;">
						<input type="text" name="nc" placeholder="昵称"/>
				        <div id="tick1">
				    	    <img src="img/tick.png"/>
				        </div>
				        <div id="for1">
				    	    <img style src="img/error.png"/>
				    	    <p>昵称不可以为空</p>
				        </div>
					</div>
				    
				    
				    
				   <!-- 2222-->
				    <div style="position: relative;">
				    	 <input id="mima" type="password" maxlength="16" name="mm" placeholder="密码"/>
				        <div id="tick2">
				    	    <img src="img/tick.png"/>
				        </div>
				        <div id="for2">
				    	    <img style src="img/error.png"/>
				    	    <p>密码不能为空</p>
				        </div>
				        <div id="for3">
				        	<div id="for5">
				        		<img id="for51" src="img/info.png"/>
				        		<img id="for52" src="img/green.png"/>
				        		<p>不能包括空格</p>
				        	</div>
				        	<div id="for6">
				        		<img id="for53" src="img/error.png"/>
				        		<img id="for54" src="img/info.png"/>
				        		<img id="for55" src="img/green.png"/>
				        		<p id="for6p">长度为8-16个字符</p>
				        	</div>
				        	<div id="for7">
				        		<img id="for56" src="img/error.png"/>
				        		<img id="for57" src="img/info.png"/>
				        		<img id="for58" src="img/green.png"/>
				        		<p id="for7p">必须包含字母、数字、符号中至少2种</p>
				        	</div>
				        </div>
				    </div>
				    
				     <div style="position: relative;">
				    	 <input type="password" maxlength="16" name="mm1" placeholder="再次输入密码"/>
				        <div id="tick4">
				    	    <img src="img/tick.png"/>
				        </div>
				        <div id="for4">
				    	    <img style src="img/error.png"/>
				    	    <p>密码不一致</p>
				        </div>
				    </div>
				    
				    
				    
				    
				    <!--3333-->
				    <div style="position: relative;">
				   	    <input  type="text" name="sjh" placeholder="手机号"/>
				        <div id="tick3">
				    	    <img src="img/tick.png"/>
				        </div>
				        <div id="for8">
				    	    <img style src="img/error.png"/>
				    	    <p>手机号码格式不正确</p>
				        </div>
				    </div>
				    
				    
				    
				    
				    
				    
				    <!--4444-->
				    <input  class="ipt1" type="text" name="yzm" placeholder="短信验证码"/>
				    <input  class="ipt2" type="button" name="yzm" value="发送短信验证码"/>
				    <input  class="ipt3" type="submit" name="zc" value="立即注册"/>
			    </form>
			</div>
		</div>
		<script type="text/javascript">
		    li01.onmouseover=function(){
		    	ul02.style.display="block";
		    }
		    li01.onmouseout=function(){
		    	ul02.style.display="none";
		    }
		    
		    var ips=document.getElementsByTagName("input");
		    console.log(ips)
		    for(var i=1;i<5;i++){
		    	ips[i].onfocus=function(){
		    		if(this.name=="nc"){
		    			this.style.border="1px solid #3487ff";
		    		}else if(this.name=="mm"){
		    			this.style.border="1px solid #3487ff";
		    		}else if(this.name=="sjh"){
		    			this.style.border="1px solid #3487ff";
		    		}else if(this.name=="yzm"){
		    			this.style.border="1px solid #3487ff";
		    		}else if(this.name=="mm1"){
		    			this.style.border="1px solid #3487ff";
		    		}
		    		
		    	}
		    }
		    
		    for(var i=1;i<5;i++){
		    	ips[i].onblur=function(){
//		    		console.log(2)
		    		if(this.name=="nc"){
		    			if(this.value==""){
		    				for1.style.display="block";
		    				tick1.style.display="none";
		    				this.style.border="1px solid  #ff5b5b";
		    			}else{
		    				tick1.style.display="block";
		    				for1.style.display="none";
		    				this.style.border="1px solid #999";
		    			}
		    		}else if(this.name=="mm"){
		    			if(this.value==""){
		    				for2.style.display="block";
		    				tick2.style.display="none";
		    				this.style.border="1px solid  #ff5b5b";
		    				for5.style.display="none";
                            for6.style.display="none";
                            for7.style.display="none";
//		    				console.log(1);
		    			}else{
//		    				console.log(this.value);
		    				if(this.value.length<8){
//		    					console.log(this.value.length);
		    					for6.style.display="block";
		    					for7.style.display="none"
		    					for6p.style.color="#ff5b5b";
		    					for2.style.display="none";
		    					for5.style.display="none";
		    					for53.style.display="inline-block";
		    					for54.style.display="none";
		    					tick2.style.display="none";
		    				}else{
		    					for5.style.display="none";
		    					for56.style.display="inline-block"
//		    					var reg=/(?!^(\d+|[a-zA-Z]+|[~!@#$%^&*?]+)$)^[\w~!@#$%^&*?]$/
		    					var reg=/^(?![0-9]+$)(?![A-Za-z]+$)(?![~!@#$%^&*?]+$)[0-9A-Za-z~!@#$%^&*?]{8,16}$/;
		    					if(reg.test(this.value)){
		    						tick2.style.display="block";
		    						this.style.border="1px solid #999";
		    						for7.style.display="none";
		    						for6.style.display="none";
		    					}else{
		    						tick2.style.display="none";
		    						for7.style.display="block";
		    						for6.style.display="none";
		    						for57.style.display="none";
		    					    for58.style.display="none";
		    					    for7p.style.color="#ff5b5b";
		    					}
		    				}
		    			}
		    		}else if(this.name=="sjh"){
		    			if(this.value==""){
		    				for8.style.display="block";
		    				tick3.style.display="none";
		    				this.style.border="1px solid  #ff5b5b";
		    			}else{
		    				var reg1=/^(\+86|0086)?[\s]*[1][3-9][0-9]{9}$/;
		    				if(reg1.test(this.value)){
		    					tick3.style.display="block";
		    				    for8.style.display="none";
		    				    this.style.border="1px solid #999";
		    				}else{
		    				    for8.style.display="block";
		    				    tick3.style.display="none";
		    				    this.style.border="1px solid  #ff5b5b";
		    				}
		    			}
		    		}else if(this.name=="yzm"){
		    			this.style.border="1px solid #999";
		    		}else if(this.name=="mm1"){
		    			if(this.value!=mima.value){
		    				this.style.border="1px solid #ff5b5b";
		    				for4.style.display="block";
		    				tick4.style.display="none";
		    			}else{
		    				
		    				tick4.style.display="block";
		    				for4.style.display="none";
		    				this.style.border="1px solid #999";
		    			}
		    		}
		    	}
		    }
		    ips[2].oninput=function(){
//              console.log(ips[2].value);
                for5.style.display="block";
                for6.style.display="block";
                for7.style.display="block";
                for53.style.display="none";
                for56.style.display="none";
                for6p.style.color="#000";
                for7p.style.color="#000";
                var reg2=/^[^\s]*$/;
                if(reg2.test(ips[2].value)){
                	for52.style.display="inline-block";
                	for51.style.display="none";
//              	console.log(111);
                }else{
                	for52.style.display="none";
                	for51.style.display="inline-block";
                }
                
                if(ips[2].value.length<8){
                	for54.style.display="inline-block";
                	for55.style.display="none";
                }else{
                	for54.style.display="none";
                	for55.style.display="inline-block";
                }
                
                var reg=/^(?![0-9]+$)(?![A-Za-z]+$)(?![~!@#$%^&*?]+$)[0-9A-Za-z~!@#$%^&*?]{8,16}$/;
                if(reg.test(ips[2].value)){
                	for58.style.display="inline-block";
                	for57.style.display="none";
                }else{
                	for58.style.display="none";
                	for57.style.display="inline-block";
                }
		    }
		    	ips[2].onclick=function(){
//              console.log(ips[2].value);
                for2.style.display="none";
                for5.style.display="block";
                for6.style.display="block";
                for7.style.display="block";
                for53.style.display="none";
                for56.style.display="none";
                for6p.style.color="#000";
                for7p.style.color="#000";
                var reg2=/^[^\s]*$/;
                if(reg2.test(ips[2].value)){
                	for52.style.display="inline-block";
                	for51.style.display="none";
//              	console.log(111);	
                }else{
                	for52.style.display="none";
                	for51.style.display="inline-block";
                }
                
                if(ips[2].value.length<8){
                	for54.style.display="inline-block";
                	for55.style.display="none";
                }else{
                	for54.style.display="none";
                	for55.style.display="inline-block";
                }
                
                var reg=/^(?![0-9]+$)(?![A-Za-z]+$)(?![~!@#$%^&*?]+$)[0-9A-Za-z~!@#$%^&*?]{8,16}$/;
                if(reg.test(ips[2].value)){
                	for58.style.display="inline-block";
                	for57.style.display="none";
                }else{
                	for58.style.display="none";
                	for57.style.display="inline-block";
                }
		    }
		    
             
		    
			ips[5].onclick=function(){
				var arr=[];
			    for (var i=48;i<=57;i++){
				    arr.push(String.fromCharCode(i));
			    }
			    for (var i=65;i<=90;i++){
				    arr.push(String.fromCharCode(i));
			    }
			    for (var i=97;i<=122;i++){
				    arr.push(String.fromCharCode(i));
			    }
//			    console.log(arr);
			    var code="";
			    while(code.length<4){
				    console.log(1);
				    var r=parseInt(Math.random()*(arr.length));
				    if(code.indexOf(arr[r])==-1){
					    code+=arr[r];
				    }
			    }
//			    console.log(code);
			    ips[4].placeholder=code;
			    return code;
			}
			form.onsubmit=function(){
				for(var i=1;i<4;i++){
					if(ips[i].nextElementSibling.style.display=="block"){
						return true;
					}else{
						return false;
					}
				}
			}


		</script>
	</body>
</html>